<template>
   <view class="vision">
    <view class="container">
      <view class="box">
         <view class="m" >
          <button @click="timer">{{ time.isRunning?'停止' : '开始' }}</button>
          <text>已过去:{{ time.elapsedTime }}s</text>
        </view> 
        <view class="description">
          <text>目的:评估移动能力</text>
          <br>
          <text>设备:秒表</text>
          <br>
          <text>使用方法:首先,让患者坐在标准的扶手椅上,并<br>在3米外的地板上画一条线,患者穿着常规的鞋类,如果需要的话,可以使用助行器</text>
        </view>
        <view class="step">
          <view style="font-weight: bold;font-size: 30rpx;color: rgb(37,135,255);">测试步骤:</view>
          <view style="font-weight: bold;font-size: 30rpx;">1.指导患者</view>
          <view>当说开始的时候，患者就:</view>
          <view>1.从椅子上站起来;</view>
          <view>2.以正常的速度走到地板上的线;</view>
          <view>3.转身</view>
          <view>4.以正常的步伐走回椅子上;</view>
          <view>5.再坐下。</view>
          <view style="font-weight: bold;font-size: 30rpx;">2.在说“走”的时候，开始计时</view>
          <view style="font-weight: bold;font-size: 30rpx;">3.病人坐下的时候停止计时</view>
          <view style="font-weight: bold;font-size: 30rpx;">4.记录时间</view>
        </view>
        <view style="margin-left: 10rpx;color: rgb(37,135,255);font-weight: bold;">C1.测试3次，中途休息1分钟，记录下表</view>
        <view class="timeTable">
          <uni-table border stripe emptyText="暂无更多数据" width="100%">
            <uni-tr>
              <uni-th align="center">
                <view width="30%">
                  次数
                </view>
              </uni-th>
              <uni-th align="center" width="50">{{ state.x }}</uni-th>
            </uni-tr>
            <uni-tr>
              <uni-td align="center">1</uni-td>
              <picker
                mode="selector"
              :range="rangeFirst"
                :value="state.firstTime" 
                @change="pickerChange1($event.detail.value)"
              > 
              <uni-td align="center">
                <view style="width: 250rpx;padding: 0;">
                  {{ rangeFirst[state.firstTime] }}
                </view>
              </uni-td>
              </picker>
            </uni-tr>

            <uni-tr>
              <uni-td align="center">2</uni-td>
              <picker
                mode="selector"
              :range="rangeFirst"
                :value="state.secondTime" 
                @change="pickerChange2($event.detail.value)" 
              > 
              <uni-td align="center">
                <view style="width: 250rpx;">
                  {{ rangeFirst[state.secondTime] }}
                </view>
              </uni-td>
              </picker>
            </uni-tr>
            <uni-tr>
              <uni-td align="center">3</uni-td>
              <picker
                mode="selector"
              :range="rangeFirst"
                :value="state.thirdTime" 
                @change="pickerChange3($event.detail.value)"  
              > 
              <uni-td align="center">
                <view style="width: 250rpx;">
                  {{ rangeFirst[state.thirdTime] }}
                </view>
              </uni-td>
              </picker>
            </uni-tr>
            <uni-tr>
              <uni-td align="center" >三次平均</uni-td>
              <uni-td align="center">
                <view style="width: 250rpx;" v-if="state.averageTime!=='NaN'">
                  {{ state.averageTime }}
                </view>
                <view style="width: 250rpx;" v-else>
                  {{ rangeFirst[state.averageTime] }}
                </view>
              </uni-td>
            </uni-tr>
          </uni-table>
          <text style="color: red;">注:完成时间≥12秒可提示有跌倒的风险。</text>
        </view>
        <view style="color: rgb(37,135,255);font-weight: bold;margin-left: 20rpx">
          C2.完成过程中观察老人的步态、平衡，老人存在以下情况：
        </view>
        <view class="scroll">
          <checkbox-group @change="checkboxChange">
                <label class="child" v-for="(question,index) in state.questions" :key="index">
                  <view class="checkbox-wrapper" v-if="index!==(state.questions.length-1)">
                      <checkbox :value="question.value" />
                      <text class="check_text">{{ question.content }}</text>
                  </view>
                </label>
          </checkbox-group>
        </view>
        <view class="question_container">
          <view style="color: rgb(37,135,255);font-weight: bold;margin-left: 20rpx">
          C3.该老人是否存在步态、平衡异常？
        </view>
        <view class="border"></view>  
        <radio-group class="radio-group" @change="handleRadioChange($event.target.value)">  
          <label class="radio-label" v-for="(option,index_option) in options" :key="option.value">  
            <radio :value="option.value" :checked="index_option === state.current"/>
            <text>{{ option.label}}</text>
          </label>  
        </radio-group>
        <view style="color: red;font-size: 30rpx;margin: 20rpx;">注：完成时间≥12秒或完成过程中步态、平衡存在异常,即存在平衡异常</view>
        </view>
        <view style="height: 200rpx;background-color: #fff;"></view>
      </view>
    </view>
      <view class="foot_box">
        <view class="foot-container">
          <text class="foot1" @tap="back">上一步</text>
          <text class="foot2">2/8</text>
          <text class="foot3" @tap="next">下一步</text>
        </view>
      </view>
</view>
</template>

<script setup lang="ts">
import {ref,reactive,computed} from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import {getBalanceListApi,postBalanceApi} from '@/apis/balance/balance'
import { useMarkStore } from '@/stores/modules/mark';
const useMark = useMarkStore()
const time = reactive({
  timerId:null,
  startTime:null,
  elapsedTime:0,
  isRunning:false
})
const timer = ()=>{
  if(time.isRunning)
  {
    clearInterval(time.timerId)
    time.isRunning=false
  }else{
    time.startTime=Date.now()
    updateTime()
    time.timerId=setInterval(updateTime,10)
  }
}
const updateTime = ()=>{
  const now = Date.now()
  const elapsed = now-time.startTime
  time.elapsedTime = elapsed
}
const back = ()=>{
  uni.navigateBack()
}
const rangeFirst = []
for(let i=4.0;i<=5.3;i+=0.1)
{
  let roundedValue = Math.round(i * 10) / 10;  
  rangeFirst.push(roundedValue); 
}
const pickerChange1 = (value)=>{
  state.firstTime =value
}
const pickerChange2 = (value)=>{
  state.secondTime =value
}
const pickerChange3 = (value)=>{
  state.thirdTime =value
}
const state = reactive({
  questions:[],
  firstTime:0,
  secondTime:0,
  thirdTime:0,
  x:'时间(秒)',
  current:1,
  averageTime:''
})

 state.averageTime = computed(()=>{
  let i = (rangeFirst[state.firstTime]+rangeFirst[state.secondTime]+rangeFirst[state.thirdTime])/3.0
  return i.toFixed(2)
})
const selected=[]
const options = reactive([
  {value:'yes',label:'是'},
  {value:'no',label:'否'},
])
const handleRadioChange = (targetValue)=>{//radio框的值改变触发回调函数
  if(targetValue==='yes')
  {
    selected.result=1
  }
  else{
    selected.result=0
  }
}
const getBalanceList = async ()=>{
  const res = await getBalanceListApi()
  state.questions = res.data
  console.log(state.questions)
  for(let i=0;i<state.questions.length;i++)
  {
    state.questions[i].value = i
    state.questions[i].result = 0
  }
  if(res.code===200)
  {
    let j = state.questions.length-1
    selected.push({mark:useMark.mark,tsBaseBalanceId:state.questions[j].id,result:0})
  }
}
const checkboxChange = (e)=>{
  const totalValues = e.detail.value
  console.log('我是change事件的',totalValues)
  for(let i=0;i<state.questions.length;i++)
  {
    let isChecked = totalValues.includes(String(state.questions[i].value))
    if(isChecked)
    {
      state.questions[i].result=1
    }else{
      state.questions[i].result=0
    }
  }
}
/*   const uuid = ref(0)
  const uuid1 = ref(0)
  const uuid2 = ref(0)
  const getUuid =async ()=>{
  const res = await wx.getRandomValues({length: 12 })
  uuid.value = wx.arrayBufferToBase64(res.randomValues)
  const res1 = await wx.getRandomValues({length: 12 })
  uuid1.value = wx.arrayBufferToBase64(res.randomValues)
  uuid2.value=uuid1.value+uuid.value
  console.log('uuid:',uuid2.value)
  }  */
  const selected1=[]
  const next =async ()=>{//提交
    const balanceTime={
    mark:useMark.mark,
    firstTime:rangeFirst[state.firstTime],
    secondTime:rangeFirst[state.secondTime],
    thirdTime:rangeFirst[state.thirdTime],
    averageTime:state.averageTime
  }
    for(let i=0;i<state.questions.length-1;i++)
    {
      selected1.push({mark:useMark.mark,tsBaseBalanceId:state.questions[i].id,result:state.questions[i].result})
    }
    const {mark,tsBaseBalanceId,result} = selected[0]
    selected1.push({mark,tsBaseBalanceId,result})
    console.log(selected1)
    let obj = {}
    obj.balance=selected1
    obj.balanceTime=balanceTime
    console.log(obj)
     const res = await postBalanceApi(obj)
    console.log(res.code,res.msg)
  uni.navigateTo({ url: '/pages/fallRiskList/components/medicine/medicine'}) 
}
onLoad(()=>{
  getBalanceList()
})
</script>

<style lang="scss">
page {
  background-color: rgb(10,127,255);
}
.vision{
  height:100vh;
  position: relative;
  .container{
    height: 100vh;
  margin: 30rpx;
  background-color: #fff;
  border-radius: 15rpx;
  .box{
    border-radius: 20rpx;
   background-color: #fff;
   .m{
    background-color: #fff;
    height: 75rpx;
   }
   .description{
    margin: 20rpx;
    background-color: rgb(240,247,255);
    color: black;
    font-size: 30rpx;
    line-height: 50rpx;
    border-radius: 15rpx;
   }
   .step{
    background-color: rgb(240,247,255);
    line-height: 50rpx;
    margin: 20rpx;
    border-radius: 15rpx;
   }
   .scroll{
    margin: 30rpx;
    padding: 20rpx;
    padding-bottom: 30rpx;
    border-radius: 15rpx;
    display: flex;    
    
    
    background-color: rgb(240,247,255);
    .checkbox-wrapper {  
      padding-bottom: 20rpx;
       
      margin-right: 10px; /* 右边距作为间隔 */
      background-color: rgb(240,247,255);  
      .check_text {  
      margin-left: 10px; /* 文本与checkbox之间的间隔 */  
    } 
   }
}
.question_container{
  .border{
  height: 3rpx;
  width: 600rpx;
  background-color: #eee;
  margin-top: 20rpx;
  margin-left: 35rpx;
  margin-bottom: 15rpx;
}
  .radio-group {   
  margin-left: 50rpx;
.radio-label {   
  padding-top: 30rpx; 
  padding-right: 200rpx; 
}  
}
}
.timeTable{
  margin: 25rpx;
  color: rgb(37,135,255);
}
}
  }
.foot_box{
    position:fixed;
    bottom: 2rpx;
    height: 100rpx;
    width: 100%;
    background-color: #fff;
    .foot-container{
      margin: 15rpx;
      background-color: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      .foot1, .foot2, .foot3{
        font-size: 35rpx;
        color: black;
      }
      .foot2{
        text-align: center;
      }
    }
  }
}
</style>